@extends('layouts.app')

@section('content')
<style type="text/css">
	.tongjitu_tb tr{height: 45px;}
</style>		
	
	
<div class="main-content">
    <div class="btn-toolbar list-toolbar">
        <div class="form-all mg_t100">
            <h2 class="text-center mg_b36" style="font-weight:bold;">行业类别数量统计表</h2>
             <div class="chart_btns">
             	<button class="btn btn-default " id="tjt">查看统计图</button>
             	<!-- 	<button class="btn btn-default " id="dy">打印</button> -->
             	<button class="btn btn-default " id="dc"  onclick="daodwsl();">导出</button>
         </div>
          <div id="div_print">
		    <table class="table-form table-border w mg-auto tongjitu_tb" id="shili_tb2" style="margin-top: 30px;">
					<thead>
						<tr>
							<th colspan="31">行业类别数量统计表</th>
						</tr>
					</thead>
					<tbody>
						<tr class="thead">
							<td>党政机关</td>
							<td>医疗单位</td>
							<td>高校</td>
							<td>中小学幼儿园</td>
							<td>商场超市</td>
							<td>金融保险证券</td>
							<td>加油站</td>
							<td>其他单位</td>

							<td>公共交通</td>
							<td>供气企业</td>
							<td>供水企业</td>
							<td>物流寄递</td>
							<td>校园行业</td>
							<td>医院行业</td>
							<td>国家重点建设工程单位</td>
							<td>治安保卫重点的单位</td>
							<td>新闻单位</td>
							<td>国防科工</td>
							<td>教育单位</td>
							<td>科研单位</td>
							<td>商超金银珠宝</td>
							<td>电信网络运营</td>
							<td>大型物资储备单位</td>
							<td>大型体育场所</td>
							<td>大型文化场所</td>
							<td>大型能源动力设施</td>
							<td>博物馆</td>
							<td>档案馆</td>
							<td>重点文物保护单位</td>
							<td>涉及危险物品单位</td>
							<td>涉及传染性菌种、毒种的单位</td>
						</tr>
						<tr>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
							<td><input type="text" /></td>
						</tr>
					</tbody>
				</table>

				 <input type="hidden" name="area" id="area" value=""/>


			</div>             
        </div>
    </div>
</div>
 <style>
	.btns {
		padding-left: 20px;
		margin-bottom: 10px;
	}
	.mg_b20{
		margin-bottom: 20px;
	}
</style>
<div id="shili_tb1" class="easyui-window" closed="true">
    <h2 class="text-center mg_b20">行业类别数量统计</h2>
     <div class="btns">
    	<button class="btn btn-default btn-sm" id="bzt">饼状图</button>
    	<button class="btn btn-default btn-sm" id="zzt">柱状图</button>
    	<button class="btn btn-default btn-sm" id="zxt">折线图</button>
    </div>
    <div id="hylbul" style="height:570px;width:600px;margin: 0 auto;"></div>
</div>
<script type="text/javascript">

</script>



<script type="text/javascript">

    function daodwsl(){
    var area = $("input[name='area']").val();
    var url = "{{url('admin/tj/daohylb')}}";
    //window.location.href = url+'?&status='+status+'&major_id='+major_id+'&add_time='+add_time;
    window.location.href = url+'?&id='+area;
}
</script>



<script type="text/javascript">
    	function load_city_data_from_menu(id){
    		inp_click(id);
			tb_ajax(id);  //表格数据
			hylbul_fn(id) ;   //统计图数据
			console.log(id);
		}
		function load_area_data_from_menu(id){
			inp_click(id);
			tb_ajax(id);  //表格数据
			hylbul_fn(id);    //统计图数据
			console.log(id);
		}
		function load_org_data_from_menu(id){
			inp_click(id);
			tb_ajax(id);     //表格数据
			hylbul_fn(id);    //统计图数据
			console.log(id); 
		}
				
  </script>
<script src="{{ URL::asset('/') }}build/dist/echarts.js"></script>
<script>
$(function(){
	window.onload = function() {
	    var from = sessionStorage.getItem("from");
	    if(from == 'pageA') {
	        window.print();
	        sessionStorage.setItem("from","");
	    }
	}
})
</script>


<script type="text/javascript">
function inp_click(id){
    $("input[name='area']").val(id);
}
</script>

<script type="text/javascript">
tb_ajax();
 function tb_ajax(id){
     	$.ajax({
    	 	type:"POST",
    	 	url:"{{url('admin/bigapi/gethylb')}}",
    	 	async:true,
    	 	data: {'id':id, '_token':'{{csrf_token()}}'},
    	    dateType: 'json',
    	    success : function(data){
    	    	var obj = {};
    	        var obj = jQuery.parseJSON(data);
    	           console.log(obj.city[0]);
    	            for(var k in obj.city[0]){              //判断对象的值是否为null,如果为null侧不生成表格
        	           		if(obj.city[0][k] != null){
	    	           			  	$(".tongjitu_tb .thead").nextAll().remove();
			    	           	    var data = [];
			    	           		for( var x in obj.city[0]){
			    	           			data.push(obj.city[0][x])
			    	           		}
			    	           		var inner_data = '<tr>'+
														 '<td>'+data[0]+'</td>'+
														 '<td>'+data[1]+'</td>'+
														 '<td>'+data[2]+'</td>'+
														 '<td>'+data[3]+'</td>'+
														 '<td>'+data[4]+'</td>'+
														 '<td>'+data[5]+'</td>'+
														 '<td>'+data[6]+'</td>'+
														 '<td>'+data[7]+'</td>'+
														 '<td>'+data[8]+'</td>'+
														 '<td>'+data[9]+'</td>'+
											'<td>'+data[10]+'</td>'+
											'<td>'+data[11]+'</td>'+
											'<td>'+data[12]+'</td>'+
											'<td>'+data[13]+'</td>'+
											'<td>'+data[14]+'</td>'+
											'<td>'+data[15]+'</td>'+
											'<td>'+data[16]+'</td>'+
											'<td>'+data[17]+'</td>'+
											'<td>'+data[18]+'</td>'+
											'<td>'+data[19]+'</td>'+
											'<td>'+data[20]+'</td>'+
											'<td>'+data[21]+'</td>'+
											'<td>'+data[22]+'</td>'+
											'<td>'+data[23]+'</td>'+
											'<td>'+data[24]+'</td>'+
											'<td>'+data[25]+'</td>'+
											'<td>'+data[26]+'</td>'+
											'<td>'+data[27]+'</td>'+
											'<td>'+data[28]+'</td>'+
											'<td>'+data[29]+'</td>'+
											'<td>'+data[30]+'</td>'+
													 '</tr>'
						      	   $(".tongjitu_tb tr").eq(-1).after(inner_data);		
	        	           		}else{
	        	           			$(".tongjitu_tb .thead").nextAll().remove();
	        	           			break;
	        	           		}
        	           }
    	    	}
    	    
    	 });
     }
</script>  
<script type="text/javascript">
var daTa ;
	//行业类别数量统计
var hylbul = echarts.init(document.getElementById('hylbul'));
hylbul_fn();
function hylbul_fn(id){
     	$.ajax({
    	 	type:"POST",
    	 	url:"{{url('admin/bigapi/gethylb')}}",
    	 	async:true,
    	 	data: {'id':id,'_token':'{{csrf_token()}}'},
    	    dateType: 'json',
    	    success : function(data){
    	    	var obj = {};
    	        var obj = jQuery.parseJSON(data);
    	       /* tubiao8(obj.city[0])
    	           if(obj.city[0].length == 0){
    	        	hylbul.clear();
    	        }else{
	        	    tubiao8(obj.city[0])
    	        }*/
    	       daTa = obj.city[0];
    	    }
    	   
    	 });
 }
 setTimeout(function(){
		tubiao2(daTa);
},500)

	$("#tjt").click(function(){
    	$('#shili_tb1').window({
			title: "编辑",
			width:'900',
			height:'600',
			minimizable:false,
			top:($(window).height() - 600) * 0.5,
			left:($(window).width() - 900) * 0.5,
			modal: true,
			closed: false,
			minimizable:false
		});
		hylbul.clear();
		 setTimeout(function(){
			tubiao2(daTa);
		},200)
	})
	
	$("#bzt").click(function(){
		hylbul.clear();
		setTimeout(function(){
			tubiao1(daTa);
		},500)
	    
})

$("#zzt").click(function(){
		hylbul.clear();
	    setTimeout(function(){
			tubiao2(daTa);
		},500)
		
})
$("#zxt").click(function(){
		hylbul.clear();
	    setTimeout(function(){
			tubiao3(daTa);
		},500)
		
})
	
   function tubiao1_jian(data){
  	var data1 = [];
	for(x in data){
		data1.push({"name":x,"value":data[x]});
	}
  	return data1;
  }
function tubiao1(data){
	hylbul_option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['实有','变更','注销'],
        textStyle:{    //图例文字的样式
        	color:'#000',
    }
    },
    series : [
        {
            name: '行业类别数量',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:tubiao1_jian(data),
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
        hylbul.setOption(hylbul_option);
}
 	
 function tubiao2_jian(data){
  	var data1 = [];
	for(x in data){
		data1.push(x);
	}
  	return data1;
  }
   function tubiao2_jian1(data){
  	var data2 = [];
	for(x in data){
		data2.push(data[x]);
	}
  	return data2;
  }

function tubiao2(datas){
hylbul_option = {
    color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '30%',
        containLabel: true,
    },
    xAxis : [
        {
            type : 'category',
            data : tubiao2_jian(datas),
            axisTick: {
                alignWithLabel: true
            },
             axisLabel:{  
                         interval:0,//横轴信息全部显示  
                         rotate:-90,//-30度角倾斜显示  
                    }  
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'单位状态数量',
            type:'bar',
            barWidth: '20%',
            data:tubiao2_jian1(datas)
        }
    ]
};
// 使用刚指定的配置项和数据显示图表。
        hylbul.setOption(hylbul_option);	
}

function tubiao3_jian(data){
  	var data1 = [];
	for(x in data){
		data1.push(x);
	}
  	return data1;
  }
   function tubiao3_jian1(data){
  	var data2 = [];
	for(x in data){
		data2.push(data[x]);
	}
  	return data2;
  }

function tubiao3(data){
	hylbul_option = {
   
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: 'transparent'
            }
        }
    },
    legend: {
        data:['行业类别数量'],
        textStyle:{    //图例文字的样式
	        color:'#000',
	    }
    },
    toolbox: {
    	show:false,
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'value',
            boundaryGap : false,
             axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                        }
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : tubiao3_jian(data),
             axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#000'
                            }
                       },
	            axisLabel:{  
	             interval:0,//横轴信息全部显示  
	             rotate:0,//-30度角倾斜显示  
	        }  
        }
    ],
    series : [
        {
            name:'行业类别数量',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:tubiao3_jian1(data)
        },
       
      
       
    ]
};

// 使用刚指定的配置项和数据显示图表。
       hylbul.setOption(hylbul_option);	
}
</script>
@stop